<template>
    <div class="container-fluid" style="background: #fff">
        <div class="row page-title">
            <div class="col-xs-11">
                <h1>用户管理</h1>
            </div>
        </div>
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="手机号">
                <el-input v-model="searchForm.Mobile" clearable placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="角色">
                <el-select v-model="searchForm.RoleName" clearable placeholder="请选择">
                    <el-option label="全部用户" value=""></el-option>
                    <el-option value="专家"></el-option>
                    <el-option value="普通用户"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
            </el-form-item>
        </el-form>
        <el-col :span="24" class="table-bottom-margin">
            <el-table :data="tableData" border style="width: 100%" :header-cell-class-name="headerbg">
                <el-table-column prop="Mobile" label="手机"></el-table-column>
                <el-table-column prop="UserName" label="昵称"> </el-table-column>
                <el-table-column prop="PointNum" label="积分"> </el-table-column>
                <el-table-column prop="GoldNum" label="金币"> </el-table-column>
                <el-table-column prop="GradeName" label="等级"> </el-table-column>
                <el-table-column prop="RoleName" label="角色"> </el-table-column>
                <el-table-column prop="IsEnable" label="状态"> </el-table-column>
                <el-table-column prop="AddTime" label="注册时间" :formatter="DateFormatter"> </el-table-column>
                <el-table-column label="操作" align="center" min-width="40" width="250px">
                    <template slot-scope="scope">
                        <el-tooltip placement="top">
                            <div slot="content">{{scope.row.IsEnable=='正常'?'冻结':'解冻'}}</div>
                            <i :class="{'fa fa-ban el-text-danger':scope.row.IsEnable=='正常','glyphicon glyphicon-ok-circle el-text-success':scope.row.IsEnable=='冻结'}" @click="updateUserEnable(scope.row.Id,scope.row.IsEnable)"></i>
                        </el-tooltip>&nbsp;&nbsp;&nbsp;&nbsp;                        
                        <el-tooltip content="编辑" placement="top">
                            <i class="fa fa-edit el-text-blue" @click="edit(scope.row)"></i>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>    
        </el-col>
        <el-col :sapn="24" style="text-align:right" v-if="count>0">
            <el-pagination @size-change="pageSizeChange" @current-change="pageCurrentChange" :current-page="currentPage"
                :page-sizes="[10]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="count">
            </el-pagination>
        </el-col>
        <br/>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                currentPage:1,
                pageSize:10,
                count:0,
                headerbg:'headerbg',//表格头部背景色
                dialogFormVisible: false,
                formLabelWidth: '25%',
                tableData:[],
                searchForm:{
                    Mobile: '',
                    RoleName: ''
                },
                getListUrl:this.urlConfig+'/api/UserManage/GetUserList',
                UpdateUserEnableUrl:this.urlConfig+'/api/UserManage/UpdateUserEnable',
            }
        },
        components: {
        },
        mounted() {
            this.getList(10,this.currentPage);
        },
        methods:{
            DateFormatter:function(row){
                return (!row.AddTime)?'':moment(row.AddTime).format("YYYY-MM-DD");
            },
            search:function(){
                this.getList(10,this.currentPage);
            },
            getList:function(PageSize,PageIndex){
                this.$http.get(this.getListUrl+'?PageSize='+PageSize+'&PageNo='+PageIndex+'&RoleName='+this.searchForm.RoleName+'&Mobile='+this.searchForm.Mobile,{
                    emulateJSON:true
                }).then(function(res){
                    this.count = 0;
                    this.tableData = [];
                    if(res.body["Code"] == "200") {
                        this.count = res.body.Count;
                        this.tableData = JSON.parse(res.body.Data);
                    }
                });
            },
            edit:function(row){
                this.$router.push({ path: '/UserManagement/EditUser' ,query: { id: row.Id,isExpert:row.RoleName} });
            },
            updateUserEnable:function(Id,Enable){//启用 禁用
                this.$http.post(this.UpdateUserEnableUrl+'?UserId='+Id+'&Enable='+(Enable=='冻结'),{},{
                    emulateJSON: true
                }).then(function(res) {
                    if(res.body["Code"] == "200") {
                        this.getList(10,this.currentPage);
                    }else{
                        this.$notify.error({title: '错误',message:res.body["Message"]});
                    }
                });
            },
            validateFun:function(){
                var errorInfo='';
                for(var i=0;i<2;i++){
                    this.$refs.form.validateField((['Title','Context'][i]),(re)=>{
                        errorInfo+=re+(re==''?'':', ');
                    })
                }
                return errorInfo;
            },
            save:function(){
                var errorInfo=this.validateFun();
                if(!errorInfo){
                    this.$http.post(this.addUrl,this.form,{
                        emulateJSON: true
                    }).then(function(res) {
                        console.log(res.body["Code"],'save')
                        if(res.body["Code"] == "200") {
                            this.dialogFormVisible = false;
                            this.getList(10,this.currentPage);
                        }else{
                            this.$notify.error({title: '错误',message:res.body["Message"]});
                        }
                    });
                }else{
                    this.$notify({title: '警告',message: errorInfo,type: 'warning',duration:1200});
                    return false;
                }
            },
            pageSizeChange:function(val){
                this.pageSize = val;
                this.getList(val,this.currentPage);
            },
            pageCurrentChange:function(val){
                this.currentPage = val;
                this.getList(this.pageSize,val);
            }
        }
    }
</script>
<style>
    .headerbg{
        background-color: #f4f3f3 !important;
    }
</style>
